// sleepBlock.js
import Event from './canvasEvent'

export class SleepWaveBlock extends Event {
  _parent:any = null
  point = { x: 0, y: 0 }
  mainWidth = 0 // 画布宽度
  mainHeight = 0 // 画布高度
  position = '' // tooltip是否固定定位，left || right || top || bottom，没有则是跟随鼠标移动

  // 动画属性
  drawerFrequency = 20 // 20帧动画
  drawerIndex = 0
  drawerSeg = 0

  constructor (canvas, opts) {
    super()
    this._parent = canvas
    this.ctx = canvas.ctx
    this.mainWidth = this._parent.canvas.width
    this.mainHeight = this._parent.canvas.height

    // 基本属性直接由构造器传进来
    Object.assign(this, opts)
    this.on('click', this.handleClick)
    this.on('mousemove', this.handleMouseMove)
  }

  commonHandler = () => {
    document.body.style.cursor = 'pointer'
    this._parent.tooltip.visible = true
  }

  // 点击事件自定义
  handleClick = (e) => {
    this.commonHandler()
  }

  // 移动事件
  handleMouseMove = (e) => {
    this.commonHandler()
    setTimeout(() => { // tooltip刚显示时还获取不到$el，下一帧再处理数据
      this.setPosX()
      this.setPosY()
      this._parent.tooltip.blockInfo = {
        color: this.color,
        title: this.title,
        value: this.value,
      }
    })
  }

  // 确认x位置
  setPosX() {
    const { tooltip, axisWidthY } = this._parent
    const boxWidth = this._parent.tooltip.$el.clientWidth
    if (this.position === 'left') {
      tooltip.position.x = axisWidthY
    } else if (this.position === 'right') {
      tooltip.position.x = this.mainWidth - boxWidth - 12
    } else {
      tooltip.position.x = this.point.x + boxWidth + 32 >= this.mainWidth ?
        this.mainWidth - boxWidth - 12 :
        this.point.x + 20
    }
  }

  // 确认y位置
  setPosY() {
    const { tooltip, axisHeightX } = this._parent
    const boxHeight = this._parent.tooltip.$el.clientHeight
    if (this.position === 'top') {
      tooltip.position.y = 8
    } else if (this.position === 'bottom') {
      tooltip.position.y = this.mainHeight - axisHeightX - boxHeight
    } else {
      tooltip.position.y = this.point.y - boxHeight - 12 < 0 ? 8 : this.point.y - boxHeight - 8
    }
  }

  draw () {
    const { startX, endX, nowRadius } = this
    const { drawerFrequency, animation } = this._parent
    this.drawerIndex = animation ? 0 : drawerFrequency
    this.drawerSeg = (endX - startX - 2 * nowRadius) / drawerFrequency / 2
    this.drawOneTime()
  }

  drawOneTime() {
    const { drawerFrequency, borderRadius } = this._parent
    if (this.drawerIndex > drawerFrequency) {
      return
    }

    const { startY, endY, nowRadius } = this
    // 表示宽度是否够画直线，如果不够直接连着贝塞尔
    const dis = (drawerFrequency - this.drawerIndex) * this.drawerSeg
    const startX = this.startX + dis
    const endX = this.endX - dis
    const hasStraight = (endX - startX) > 2 * borderRadius

    this.ctx.beginPath()
    this.ctx.lineWidth = this._parent.lineWidth
    this.ctx.strokeStyle = this.color

    // left border
    this.ctx.moveTo(startX, startY + borderRadius)
    this.ctx.lineTo(startX, endY - borderRadius)
    this.ctx.quadraticCurveTo(startX, endY, startX + nowRadius, endY)

    // bottom border
    if (hasStraight) { // 是否需要画直线
      this.ctx.lineTo(endX - borderRadius, endY)
    }

    // right border
    this.ctx.quadraticCurveTo(endX, endY, endX, endY - borderRadius)
    this.ctx.lineTo(endX, startY + borderRadius)
    this.ctx.quadraticCurveTo(endX, startY, endX - nowRadius, startY)

    // top border
    if (hasStraight) { // 是否需要画直线
      this.ctx.lineTo(startX + borderRadius, startY)
    }
    this.ctx.quadraticCurveTo(startX, startY, startX, startY + borderRadius)

    this.ctx.stroke()
    this.ctx.fillStyle = this.color
    this.ctx.fill()

    this.drawerIndex += 1
    requestAnimationFrame(() => this.drawOneTime())
  }

  // 事件触发的位置是不是当前block位置
  isEventInRegion (clientX, clientY) {
    this.point = this.getEventPosition(clientX, clientY) // 计算基于canvas坐标系的坐标值

    const { x, y } = this.point
    const width = this.endX - this.startX
    const height = this.endY - this.startY

    if (this.startX < x && x < this.startX + width && this.startY < y && y < this.startY + height) {
      return true
    }
    document.body.style.cursor = 'default'
    this._parent.tooltip.visible = false
    return false
  }

  getEventPosition (clientX, clientY) {
    // 获取鼠标相对于Canvas的位置
    const rect = this._parent.canvas.getBoundingClientRect()
    const mouseX = clientX - rect.left;
    const mouseY = clientY - rect.top;

    // 逆变换鼠标坐标以匹配缩放后的坐标系
    const scaleX = this._parent.canvas.width / rect.width;
    const scaleY = this._parent.canvas.height / rect.height;

    const scaledMouseX = mouseX * scaleX;
    const scaledMouseY = mouseY * scaleY;
    return {
      x: scaledMouseX,
      y: scaledMouseY
    }
  }
}
